<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>{% block title %}{% endblock %}</title>
    <link href="/static/css/style.css" type="text/css" rel="stylesheet"/>
    <link href="/static/css/main.css" type="text/css" rel="stylesheet"/>
    <script src="/static/js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="/static/js/common.js" type="text/javascript"></script>
    {% block too_link_js %}
    {% endblock %}
    <script>
        $(function () {
            $('a[href*=#],area[href*=#]').click(function () {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var $target = $(this.hash);
                    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                    if ($target.length) {
                        var targetOffset = $target.offset().top;
                        $('html,body,.div1').animate({
                                scrollTop: targetOffset
                            },
                            1000);
                        return false;
                    }
                }
            });
        })
    </script>
</head>
<body class="index">
<div class="top_ad">
    <div class="w1200"><a href="#" id="close"></a></div>
</div>

<div class="top">
    <div class="w1200">
        <div class="fr">

            {% if user.is_authenticated %}
                <div v-if="username" class="login_btn">
                    欢迎您：<em>{{ user.username }}</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
            {% else %}
                <div v-else class="login_btn fl">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:register') }}">注册</a>
                </div>
            {% endif %}


            <div class="right">
                <a href="{{ url('users:member') }}">我的会员中心</a>
                <span>|</span>
                <a href="#">收藏夹</a>
                <span>|</span>
                <a href="#">服务中心</a>
                <span>|</span>
                <a href="#">在线客服</a>
                <span>|</span>
                <a href="#">购物车<b>0</b>件</a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="head">
    <div class="w1200">
        <div class="logo"><a href="#"></a></div>
        <div class="search">
            <form action="#" class="form">
                <input type="text" value="输入商品关键字" name="keyword" class="txt" onfocus="if(value=='输入商品关键字') {value=''}"
                       onblur="if(value=='') {value='输入商品关键字'}"/>
                <input type="submit" value="搜索" class="sub"/>
            </form>
            <p><a href="#">iphone6s</a>|<a href="#">面膜</a>|<a href="#">婚庆床品</a>|<a href="#">运动鞋</a>|<a
                    href="#">眼霜</a>|<a href="#">月饼</a>|<a href="#">智能手机</a>|<a href="#">连衣裙</a></p>
        </div>
        <div class="s_r">
            <dl>
                <dt><p>购物车<span>0</span></p></dt>
                <dd>客服电话：<b>400-0139-038</b></dd>
            </dl>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="menu">
    <div class="w1200">

        <div class="item" id="nav"><a href="#" class="nav">全部商品分类</a>
            <div class="nav_son">

                <ul>
                    {% for _, category_info in categories.items() %}
                        {% for category_1 in category_info["channels"] %}
                            <li class="li01"><a href="{{ category_1['url'] }}">{{ category_1['name'] }}</a></li>
                        {% endfor %}
                    {% endfor %}
                </ul>


                <div class="hover">
                    {% for _, category_info in categories.items() %}

                        <div id="son">
                            {% for category_2 in category_info["sub_cats"] %}
                                <dl>
                                    <dt>{{ category_2['name'] }}</dt>
                                    <dd>
                                        {% for category_3 in category_2['sub_cats'] %}
                                            {#                                        <a href="#">{{ category_3['name'] }}</a>#}
                                            <a href="{{ url('goods:list',kwargs={"category_id":category_3['id'], "page_num":1}) }}">{{ category_3['name'] }}</a>
                                        {% endfor %}
                                    </dd>
                                    <div class="clear"></div>
                                </dl>
                            {% endfor %}
                        </div>

                    {% endfor %}
                </div>


            </div>
        </div>
        <div class="item"><a href="#" class="home">商城首页</a></div>
        <div class="item"><a href="#">易易特色</a></div>
        <div class="item"><a href="#">热销产品</a></div>
        <div class="item"><a href="#">新品上市</a></div>
        <div class="item"><a href="#">精品推荐</a></div>
        <div class="item"><a href="#">生活服务</a></div>
    </div>
</div>

{% block top_javascript %}
{% endblock %}

{% block top_link %}
{% endblock %}


<!--footer-->
<div class="footer">
    <div class="f_bz">
        <div class="w1200">
            <dl class="dl01">
                <dt>正品保证</dt>
                <dd>正品护航 购物无忧</dd>
            </dl>
            <dl class="dl02">
                <dt>你消费 我买单</dt>
                <dd>返现购物商城</dd>
            </dl>
            <dl class="dl03">
                <dt>品类丰富</dt>
                <dd>品类齐全 轻松购物</dd>
            </dl>
            <dl class="dl04">
                <dt>特色服务体验</dt>
                <dd>为您呈现不一样的服务</dd>
            </dl>
            <div class="clear"></div>
        </div>
    </div>
    <div class="f_nav">
        <div class="w1200">
            <dl>
                <dt>新手指南</dt>
                <dd>
                    <a href="#">注册新用户</a>
                    <a href="#">商品订购流程</a>
                    <a href="#">会员注册协议</a>
                </dd>
            </dl>
            <dl>
                <dt>付款方式</dt>
                <dd>
                    <a href="#">支付宝支付</a>
                    <a href="#">网上银行支付</a>
                    <a href="#">货到付款</a>
                </dd>
            </dl>
            <dl>
                <dt>常见问题</dt>
                <dd>
                    <a href="#">订单状态</a>
                    <a href="#">发票说明</a>
                </dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd>
                    <a href="#">退换货政策</a>
                    <a href="#">退换货流程</a>
                    <a href="#">退款说明</a>
                    <a href="#">退换货申请</a>
                </dd>
            </dl>
            <dl>
                <dt>客服中心</dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">联系客服</a>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div class="ewm"><img src="/static/images/home/ico35.png"/></div>
            <div class="ewm"><img src="/static/images/home/ico38.png"/></div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="w1200">
        <div class="bottom">
            <a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a href="#">用户协议</a>|<a href="#">联系我们</a>|<a
                href="#">人才招聘</a>|<a href="#">站点地图</a>

            <p>网络文化经营许可证：粤网文[2015]0295-065号<br/>© 2015 深圳易易城科技网络有限公司. 粤ICP备15042543号</p>
            <p class="p02"><img src="/static/images/home/ico25.jpg"/><img src="/static/images/home/ico26.jpg"/><img
                    src="/static/images/home/ico27.jpg"/><img src="/static/images/home/ico36.jpg"/><img
                    src="/static/images/home/ico37.jpg"/>
            </p>
        </div>
    </div>
</div>
<!--float_right-->
<div class="float">
    <ul>
        <li><a href="#" class="a01"></a></li>
        <li><a href="#" class="a02"></a></li>
        <li><a href="#" class="a03"></a></li>
        <li><a href="#" class="a04"></a></li>
    </ul>
</div>
<!--float_left-->
<div class="float2">
    <ul>
        <li><a href="#a01" class="a01 on" id="idx01">限时抢购</a></li>
        <li><a href="#a02" class="a02" id="idx02"></a></li>
        <li><a href="#a03" class="a03" id="idx03"></a></li>
        <li><a href="#a04" class="a04" id="idx04"></a></li>
        <li><a href="#a05" class="a05" id="idx05"></a></li>
        <li><a href="#a06" class="a06" id="idx06"></a></li>
    </ul>
</div>

<script language="javascript" type="text/javascript">
    $(function () {
        var dv = $(".idx01").offset().top;
        var dv2 = $(".idx02").offset().top;
        var dv3 = $("#idx03").offset().top;
        var dv4 = $("#idx04").offset().top;
        var dv5 = $("#idx05").offset().top;
        var dv6 = $("#idx06").offset().top;
        window.onscroll = function () {
            if (dv < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a01").addClass("on");

            }
            if (dv2 < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a02").addClass("on");
            }
            if (dv3 < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a03").addClass("on");
            }
            if (dv4 < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a04").addClass("on");
            }
            if (dv5 < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a05").addClass("on");
            }
            if (dv6 < document.body.scrollTop) {
                $(".float2 a").removeClass("on");
                $(".float2 .a06").addClass("on");
            }
        }
    });
</script>
<script language="javascript" type="text/javascript">
    <!--//-->
    <![CDATA[//><!--
    //图片滚动列表 mengjia 070816
    var Speed = 10; //速度(毫秒)
    var Space = 10; //每次移动(px)
    var PageWidth = 404; //翻页宽度
    var fill = 0; //整体移位
    var MoveLock = false;
    var MoveTimeObj;
    var Comp = 0;
    var AutoPlayObj = null;
    GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    GetObj('ISL_Cont').scrollLeft = fill;
    GetObj("ISL_Cont").onmouseover = function () {
        clearInterval(AutoPlayObj);
    }
    GetObj("ISL_Cont").onmouseout = function () {
        AutoPlay();
    }
    AutoPlay();

    function GetObj(objName) {
        if (document.getElementById) {
            return eval('document.getElementById("' + objName + '")')
        } else {
            return eval

            ('document.all.' + objName)
        }
    }

    function AutoPlay() { //自动滚动
        clearInterval(AutoPlayObj);
        AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 5000); //间隔时间
    }

    function ISL_GoUp() { //上翻开始
        if (MoveLock) return;
        clearInterval(AutoPlayObj);
        MoveLock = true;
        MoveTimeObj = setInterval('ISL_ScrUp();', Speed);
    }

    function ISL_StopUp() { //上翻停止
        clearInterval(MoveTimeObj);
        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
            Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
            CompScr();
        } else {
            MoveLock = false;
        }
        AutoPlay();
    }

    function ISL_ScrUp() { //上翻动作
        if (GetObj('ISL_Cont').scrollLeft <= 0) {
            GetObj('ISL_Cont').scrollLeft = GetObj

            ('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth
        }
        GetObj('ISL_Cont').scrollLeft -= Space;
    }

    function ISL_GoDown() { //下翻
        clearInterval(MoveTimeObj);
        if (MoveLock) return;
        clearInterval(AutoPlayObj);
        MoveLock = true;
        ISL_ScrDown();
        MoveTimeObj = setInterval('ISL_ScrDown()', Speed);
    }

    function ISL_StopDown() { //下翻停止
        clearInterval(MoveTimeObj);
        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
            Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
            CompScr();
        } else {
            MoveLock = false;
        }
        AutoPlay();
    }

    function ISL_ScrDown() { //下翻动作
        if (GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) {
            GetObj('ISL_Cont').scrollLeft =

                GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
        }
        GetObj('ISL_Cont').scrollLeft += Space;
    }

    function CompScr() {
        var num;
        if (Comp == 0) {
            MoveLock = false;
            return;
        }
        if (Comp < 0) { //上翻
            if (Comp < -Space) {
                Comp += Space;
                num = Space;
            } else {
                num = -Comp;
                Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft -= num;
            setTimeout('CompScr()', Speed);
        } else { //下翻
            if (Comp > Space) {
                Comp -= Space;
                num = Space;
            } else {
                num = Comp;
                Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft += num;
            setTimeout('CompScr()', Speed);
        }
    }

    //--><!
    ]]>
</script>

{% block bottom_link_js %}
{% endblock %}

</body>
</html>
